<div class="content">
    <div id="example_title">
        <h1>Notification</h1>
        You can show notification that do not interrupt user flow with the new w2utils.notify() method
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div>
    <button class="w2ui-btn notify-btn" value="1">Show a Notification</button>
    <button class="w2ui-btn notify-btn" value="2">Show an Error</button>
    <button class="w2ui-btn notify-btn" value="3">With actions</button>
    <button class="w2ui-btn notify-btn" value="4">Quick one</button>
</div>

<div id="preview-box" style="width: 700px; height: 300px; border: 1px solid #efefef; position: relative;
        margin-top: 20px; padding: 10px; color: #aaa; font-size: 17px">
    <div class="w2ui-centered" style="line-height: 1.5">
        By default notifications are in the document body, <br>
        but they could be in any box, for example this one.
    </div>
</div>
<label style="padding: 10px 0; display: inline-block">
    <input id="in-the-box" type="checkbox" checked style="position: relative; top: 1px"> Show in the box above
</label>

<!--CODE-->
<script type="module">
import { w2utils, w2alert, query } from '__W2UI_PATH__'

query('.notify-btn').on('click', event => {
    let where = query('#in-the-box').prop('checked') ? '#preview-box' : undefined
    switch(event.target.value) {
        case "1":
            w2utils.notify(`User notification started at ${new Date().toLocaleTimeString()}. Will auto close in 15 seconds.`, {
                class: "custom-class", where })
            break
        case "2":
            w2utils.notify('Error: cannot do this action', { error: true, where })
            break
        case "3":
            w2utils.notify('Message was sent ${undo} or ${don\'t show again}', {
                actions: {
                    undo() {
                        w2alert('undo')
                    },
                    "don't show again"() {
                        w2alert("don't show again")
                    }
                },
                where
            })
            break
        case "4":
            w2utils.notify('Message will auto close in 2 seconds', { timeout: 2000, where: query('#preview-box'), where })
            break
    }
})
</script>
<!--CODE-->